<template>
  <right>
    <template slot="card" v-if = "!loading">
      <CardGroup @tabChange="tabChange" ref="webchatGroup"></CardGroup>
    </template>
    <template slot="detail">
      <keep-alive>
        <router-view>
        </router-view>
      </keep-alive>
    </template>
  </right>
</template>
<script>
  import right from '@/components/ui-modules/right-layout/RightLayout'
  import CardGroup from './WebchatCardGroup.vue'
  import * as types from '@/store/modules/webchat/mutation-types.js'
  import { deepClone } from '@/utils/m7Utils'
  export default {
    name: 'Webchat',
    data () {
      return {
        loading: true,
        currentRoute: '',
        preRoute: ''
      }
    },
    components: {
      right,
      CardGroup
    },
    watch: {
      $route (to, from) {
        if (to.fullPath.indexOf('webchat_todo') > -1) {
          if (to.query.flag === 'notify') {
            let webchatTodoList = this.$store.state.webchat.webchatList.webchat_todo.list
            let flag = true
            if (to.path.split('/').length > 4) {
              flag = false
              webchatTodoList.forEach(item => {
                if (item._id === to.path.split('/')[4]) {
                  flag = true
                }
              })
            }
            if (!this.$store.state.webchat.onTimeSearch && flag) {
              this.preRoute = to.fullPath
            } else {
              this.$router.push({path: '/index/webchat/webchat_todo'})
            }
          } else {
            this.preRoute = to.fullPath
          }
        } 
      }
    },
    methods: {
      tabChange (tabType) {
        if (tabType === 'webchat_todo') {
          this.$nextTick(() => {
            this.$refs.webchatGroup.pushWebchatTodoRoute(this.preRoute || '/index/webchat/webchat_todo')
          })
        }
      }
    },
    beforeMount () {
      let that = this
      fetchCurrentUser(this.$store, {}).then(() => {
        that.loading = false
      })
      // 在线咨询模块加载的时候，需要获取满意度评价的设置，放到dicMap中
      let data = {
        type: 'webchatCSR'
      }
      this.$store.dispatch('getCSRDic', data).then(res => {
        if (res && res.success && res.row) {
          var updateData = res.row.NotAllowAgentPushCsr || false
          let CSRShowToAgentStatus = res.row.CSRShowToAgent || 'all'
          this.$updateCache('webchatSatisfiedForbid', updateData)
          this.$updateCache('CSRShowToAgent', CSRShowToAgentStatus)
        }
      })
      var sendData = {
        page: 1,
        limit: 10
      }
      this.$store.dispatch('querySessionForm', sendData).then((resp) => {
        if (resp && resp.success) {
          var list = []
          if (resp.list) {
            list = deepClone(resp.list)
          }
          this.$store.commit(types.UPDATE_WEBCHAT_FORM_LIST, list)
        }
      })
    },
    beforeRouteLeave (to, from, next) {
      if (to.path.split('/')[2] !== 'webchat') {
        let fromArr = from.path.split('/')
        let conbox = document.getElementsByClassName('send_msg_textarea')
        if (conbox.length && fromArr.length > 4) {
          let value = conbox[0].value
          this.$store.commit(types.REMEMBER_LAST_CON, {id: fromArr[4], data: value})
        }
      }
      this.currentRoute = from.fullPath
      next()
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (to.query && to.query.flag && to.query.flag === 'notify') {
          // vm.$router.push({path: to.fullPath})
        } else if (to.query && to.query.status && to.query.status === 'autoqcWebchat') {
          vm.tabType = 'webchat_all'
          vm.$router.push({path: to.fullPath})
        } else if (vm.currentRoute) {
          let tabName = vm.currentRoute.split('/')[3]
          vm.$router.push({path: vm.currentRoute})
          if (tabName) {
            vm.$store.commit('BLANK', tabName)
          }
          if (to.path === '/index/webchat/webchat_all/export') {
            vm.$nextTick(() => {
              vm.$router.push({path: vm.currentRoute})
              vm.$router.push({path: to.path})
            })
          }
        }
        if (!vm.currentRoute) {
          vm.$store.commit('BLANK', 'webchat_todo')
        }
      })
    }
  }
  function fetchCurrentUser (store, data) {
    return store.dispatch('getCurrentUser', data)
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  li{
    width:439px;
    height:79px;
    border-bottom:1px solid #eee;
  }
  .cust-tab{
    height:100%;
  }
</style>
<style lang="stylus">
  .emoji_item
    width 26px
    height 26px
  .card_chat_content
    .emoji_item
      width 20px
      height 20px
  .agents_and_skill_group
    .emoji_item
      width 20px
      height 20px    
</style>
